import { Space, Card, Typography } from "tdesign-react";
import HightLightCode from "@/components/HightLightCode";
import { propsDataCode } from "@/config";
import "../index.less";

const { Text, Title, Paragraph } = Typography;
const PropsData = () => {
	return (
		<Card>
			<Space direction="vertical" style={{ width: "100%" }}>
				<Title level="h3">React Props</Title>
				<Paragraph>
					Props（全称：Properties）是 React 中用于组件间通信的核心机制。它允许父组件向子组件传递数据或回调函数，类似于 HTML
					元素的属性（如 <img src="..." /> 中的 src）。Props 是只读的，子组件不能直接修改接收到的 props，只能通过父组件传递新的
					props 来更新数据。
				</Paragraph>
				<Title level="h3">基本用法</Title>
				{propsDataCode.map((item, index) => {
					return (
						<Space direction="vertical" key={index}>
							<Title level="h5">{item.title}</Title>
							<Text>{item.introduce}</Text>
							<HightLightCode code={item.code} />
						</Space>
					);
				})}
			</Space>
		</Card>
	);
};

export default PropsData;
